<template>
    <div class="lzx_container">
        <div id="view3d"></div>
        <div id="view2d"></div>
        <div id="side">
            <div class="drawing-list">
                <div class="title">
                    导出的图纸
                </div>
                <ul class="detail">
                    <li
                        v-for="(item, i) in layerList"
                        :key="i"
                        :class="{ active: item.viewInfo.id == nowIndex }"
                        @click="load2D(item.viewInfo.id)"
                    >
                        {{ item.viewInfo.name }}
                    </li>
                </ul>
            </div>
            <div class="drawing-list changeHeightPo">
                <div class="title">
                    <span class="toHide">批注</span>
                    <div class="newButton" v-if="!isEdit">
                        <router-link :to="{ path: 'model_notation' }">
                            添加批注
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="drawing-list changeHeightPo">
                <div class="title">
                    <span class="toHide">剖切盒</span>
                    <div class="newButton" v-if="!isEdit">
                        <a href="javascript:void(0)" @click="openPo()" id="btnShowSctBox">开启剖切盒</a>
                    </div>
                </div>
            </div>
            <div class="drawing-list changeHeightPo">
                <div class="title">
                    <span>路径漫游</span>
                </div>
                <div class="wanderContent">
                    <div class="btns">
                        <div class="frameSet">
                            <button @click="addkey">设置关键帧</button>
                            <button @click="clearkey">清除关键帧</button>
                            <input type="number" disabled v-model="frameNum" />
                        </div>
                        <div class="frameplay">
                            <button @click="playkey">播放</button>
                            <button @click="stopkey">暂停</button>
                            <input type="number" placeholder="设置播放时间（s）" v-model="time" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            viewToken: String,
            layerList: null,
            nowIndex: null,
            showPo: false,
            frameNum: 0,
            viewerDrawing: null,
            isEdit: false,
            time: null
        };
    },
    mounted() {
        let me = this;
        // 70c3b2ecb2584d639c441062e740cc87

        const viewToken = '79d7157fea624e44a9b4e6ed15a7123e';
        me.viewToken = viewToken;
        // 初始化显示组件
        let options = new BimfaceSDKLoaderConfig();
        options.viewToken = viewToken;
        BimfaceSDKLoader.load(options, successCallback, failureCallback);

        function successCallback(viewMetaData) {
            // 获取DOM元素
            let dom3d = document.getElementById('view3d');
            // 配置参数
            let config = new Glodon.Bimface.Application.WebApplication3DConfig();
            config.domElement = dom3d;
            // config.enableViewhouse = false;
            //取消工具条
            //   config.Toolbars = []
            config.MainToolbar = [];
            // 创建viewer3D对象
            window.app = new Glodon.Bimface.Application.WebApplication3D(config);
            // 添加模型
            app.addView(viewToken);

            //模型点击监听事件
            app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function(el) {
                //根据模型构件ID获取对应图纸的构件ID
                var did = me.viewerDrawing.toDrawingId(el.objectId);
                if (did) {
                    //如果有对应的模型构件ID，就缩放到对应位置
                    me.viewerDrawing._drawingViewer.zoomToObject(did);
                    me.viewerDrawing._drawingViewer.update();
                }
            });
            // 监听添加view完成的事件
            app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
                // 渲染3D模型
                app.render();
                window.viewer3D = app.getViewer();
                window.sectionBoxConfig = new Glodon.Bimface.Plugins.Section.SectionBoxConfig();
                window.sectionBoxConfig.viewer = viewer3D;
                window.sectionBox = new Glodon.Bimface.Plugins.Section.SectionBox(sectionBoxConfig);
                sectionBox.hideBox();
                var WalkthroughConfig = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
                WalkthroughConfig.viewer = viewer3D;
                window.wt = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(WalkthroughConfig);
                viewer3D.getDrawingsheets(function(data) {
                    console.log(data);
                    me.layerList = data;
                    me.load2D();
                });
                //自适应屏幕大小
                window.onresize = function() {
                    viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40);
                };
            });
        }
        function failureCallback(error) {
            console.log(error);
        }
    },
    methods: {
        load2D(id) {
            //隐藏右上角viewhouse
            //viewer3D.hideViewHouse();
            let options2d = new BimfaceSDKLoaderConfig();
            let me = this;
            let viewToken = me.viewToken;
            options2d.viewToken = viewToken;
            options2d.viewType = BimfaceViewTypeOption.DrawingView;
            BimfaceSDKLoader.load(options2d, successCallback2d, failureCallback2d);
            function successCallback2d(viewMetaData) {
                let dom2d = document.getElementById('view2d');
                dom2d.innerHTML = '';
                let config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig();
                config2d.domElement = dom2d;
                //添加图纸
                me.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
                // var drawingUrl = viewMetaData.drawingUrl
                //如果是单模型的话，只需要传图纸id
                if (id) {
                    me.nowIndex = id;
                    me.viewerDrawing.load(viewToken, id);
                } else {
                    // viewerDrawing.load(viewToken)
                    //   me.layerList.forEach((item, index) => {
                    //     console.log(item, index)
                    //   })
                    me.nowIndex = me.layerList[0].viewInfo.id;
                    me.viewerDrawing.load(viewToken, me.layerList[0].viewInfo.id);
                }

                //如果是集成模型的话，需要传图纸id和单模型的fileid
                //   var _id =1287057;
                //   var _fileid =1628186476905664;
                //   viewerDrawing.load(viewToken,_id,_fileid);

                me.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.ComponentsSelectionChanged, function(el) {
                    if (el.length > 0) {
                        //  var drawid=_fileid+'.'+el[0]
                        //  console.log(drawid);
                        //根据图纸点击的构件ID获取对应的模型构件ID
                        var rid = me.viewerDrawing.toModelId(el[0]);
                        viewer3D.clearIsolation();
                        //定位到该构件
                        viewer3D.setSelectedComponentsById([rid]);
                        //是否存在构件
                        var isExist = viewer3D.getViewer().getComponentInfoByUserId(rid);
                        if (isExist) {
                            //隔离构件，其他半透明
                            viewer3D.isolateComponentsById([rid], Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent);
                            //集成模型需要把fileid加进去
                            //viewer3D.isolateComponentsById([_fileid+'.'+rid], Glodon.Bimface.Viewer.IsolateOption.MakeOthersTranslucent);
                            //定位到该构件
                            //viewer3D.setSelectedComponentsById([_fileid+'.'+rid]);
                            viewer3D.zoomToSelectedComponents();
                        } else {
                            viewer3D.clearIsolation();
                            viewer3D.render();
                        }
                    }
                });
            }
            function failureCallback2d(error) {
                console.log(error);
            }
        },
        openPo() {
            if (!this.showPo) {
                sectionBox.showBox();
                this.setButtonTextForA('btnShowSctBox', '关闭剖切盒');
                this.showPo = true;
            } else {
                sectionBox.hideBox();
                this.setButtonTextForA('btnShowSctBox', '开启剖切盒');
                // sectionBox.reset();
                this.showPo = false;
            }
            viewer3D.render();
        },
        setButtonTextForA(btnId, text) {
            var dom = document.getElementById(btnId);
            if (dom != null && dom.nodeName == 'A') {
                dom.innerHTML = text;
            }
        },
        //增加关键帧，大于1个
        addkey() {
            // 记录视角
            wt.addKeyFrame();
            this.frameNum += 1;
            console.log(this.frameNum);
        },
        //播放
        playkey() {
            if (this.frameNum < 2) {
                alert('请至少添加2个关键帧！');
            } else {
                let time = this.time;
                if (!time) {
                    time = 5;
                }
                //设置时间
                wt.setWalkthroughTime(time);
                //获取关键帧列表
                var list = wt.getKeyFrames();
                //从哪一个关键帧开始，关键帧id
                wt.play(list[0].id);
            }
        },
        stopkey() {
            wt.stop();
        },
        clearkey() {
            wt.clearKeyFrames();
            this.frameNum = 0;
        }
        // 批注
        // defaultAnnotation() {
        //     const me = this;
        //     // if(!me.listStorage) sessionStorage.annotationList = JSON.stringify(spliteAnnotation);
        //     me.clearToolDom();
        //     me.dwgViewer.annotationManager = null;
        //     if (!me.dwgViewer.annotationManager) {
        //         var config = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig();
        //         config.viewer = viewer2D;
        //         var annotationToolbar = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(config);

        //         me.dwgViewer.annotationToolbar = annotationToolbar;
        //         me.dwgViewer.annotationManager = annotationToolbar.getAnnotationManager();
        //         me.defaultAnnotationList();
        //     }
        // },
    }
};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.lzx_container {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
canvas {
    left: 0 !important;
}
#view2d,
#view3d {
    height: 86vh;
    width: 43%;
    background-color: #ddd;
}
#view3d {
    background-color: #fff;
}
#side {
    width: 14%;
    padding: 6px;
}
.drawing-list {
    height: 50%;
    text-align: left;
}
.drawing-list .detail li {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
}
.drawing-list .detail li.active {
    color: #fff;
    background-color: #11dab7;
}

.drawing-list .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid #ddd;
}

.newButton {
    box-sizing: border-box;
    text-align: center;
    width: 80px;
    height: 24px;
    line-height: 24px;
    border-radius: 3px;
    border: none;
    background: #11dab7;
    font-size: 13px;
}

.newButton a {
    color: #fff;
    text-decoration: none;
}

.drawing-list .title:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 10px;
    width: 4px;
    height: 12px;
    background-color: #32d3a6;
}
.drawing-list .detail {
    height: calc(100% - 42px);
    overflow-y: auto;
    padding-left: 0;
}
.drawing-list {
    height: 32%;
}
.drawing-list .detail::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 10px;
    height: 10px;
}
/* 滚动条中的小方块处理 */
.drawing-list .detail::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
}
/* 滚动条滚动的轨道 */
.drawing-list .detail::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #fff;
}
.content {
    padding: 0px !important;
    width: 102%;
}
.changeHeightPo {
    height: 8.88%;
}
.wanderContent {
    padding: 10px 0 10px 8px;
    height: 160px;
}
.wanderContent .btns button {
    background-color: #11dab7;
    color: white;
    padding: 4px;
    border-radius: 2px;
    border: none;
    outline: none;
    margin-right: 3px;
    margin-top: 2px;
}
.wanderContent .btns button:hover {
    cursor: pointer;
}
.wanderContent .btns input {
    height: 30px;
    margin: 6px 0;
    padding: 0 4px;
}
.frameSet input {
    color: #242f42;
    font-size: 20px;
}
@media screen and (max-width: 1130px) {
    .toHide {
        display: none;
    }
}
</style>
